<template>
    <div class="bangdan">
        <p>热门榜:</p>
        <ul>
            <li v-for="(item) in bdarr" :key="item.id">
                <router-link :to="{ path: '/detail', query: { id: item.id } }">
                    <img :src="item.cover" alt="">
                    <div class="text">
                        <b>{{ item.title }}</b>
                        <div class="miaoshu">{{ item.recomContent }}</div>
                        <span>{{ item.author }}</span>
                    </div>
                </router-link>
            </li>

        </ul>
    </div>

</template>
<style>
.bangdan {
    padding: 10px;
    padding-bottom: 67px;
    p {
        position: fixed;
        width: 100%;
        border-bottom: 1px solid turquoise;
        background-color: white;
        padding-bottom: 5px;
    }

    ul {
        margin-top: 35px;

        li {
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 15px;
            border-bottom: 5px solid #ccc;
            a{
                display: flex;
                img {
                height: 150px;
                border-radius: 15px;
                margin-right: 10px;
            }

            .text {
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .miaoshu {
                    font-size: 16px;
                    color: #ccc;
                }

                b {
                    font-size: 20px;
                }

                span {
                    font-size: 18px;
                    color: turquoise;
                    font-weight: bold;
                }
            }
            }
           
        }
    }
}
</style>

<script>
// 导入接口
import { store } from '../api/index'
export default {
    data() {
        return {
            bdarr: []
        }
    },
    methods: {
        // 编写获取榜单的方法
        async getStore() {
            // 等待调用接口
            await store()
                .then(
                    content => {
                        // 做数据响应
                        // 解构赋值
                        // 映射数据
                        let { list } = content;
                        let newbdarr = list.map(item => {
                            // 整合数据
                            let obj = {};
                            obj.id = item.id;
                            obj.title = item.title;
                            obj.author = item.author;
                            obj.recomContent = item.recomContent;
                            obj.cover = item.cover;
                            return obj;
                        })
                        // 赋值(响应)
                        this.bdarr = newbdarr;
                    }
                )
                .catch(
                    err => {
                        console.log("请求失败", err);
                    }
                )
        }
    },
    // 初始化 钩子
    created() {
        this.getStore();
    },
}
</script>